<!--
 * @Author: Guiter 1336263157@qq.com
 * @Date: 2023-11-17 17:42:59
 * @LastEditors: Guiter 1336263157@qq.com
 * @LastEditTime: 2023-11-29 13:28:50
 * @FilePath: \nuxt3-music-player\src\components\Sidebar\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script lang="ts" setup>
const router = useRouter();
const songsStore = useSongsStore();
console.log(songsStore.songsList);

const gotoMusicLists = async (id: number): Promise<void> => {
  await router.push({
    path: `/musicLists/${id}`
  });
};
</script>

<template>
  <div class="border-r-default w-65 overflow-y-auto">
    <div class="border-b-default h-18 flex items-center justify-center">
      <h1 class="hidden cursor-pointer md:block">简约音乐播放器</h1>
      <h1 class="block cursor-pointer md:hidden">简约</h1>
    </div>
    <div class="overflow-x-hidden overflow-y-auto">
      <!-- 上 -->
      <div class="border-b-default border-b-4">
        <ul>
          <li class="lists-active">云音乐精选</li>
          <li class="lists-default">博客</li>
          <li class="lists-default">社区</li>
        </ul>
      </div>
      <!-- 中 -->
      <div class="border-b-default border-b-4">
        <ul>
          <li class="lists-default">我喜欢的音乐</li>
          <li class="lists-default">最近播放</li>
          <li class="lists-default">下载管理</li>
          <li class="lists-default">本地音乐</li>
        </ul>
      </div>
      <!-- 下 -->
      <div class="border-b-default border-b-4">
        <span class="mx-3 my-2 inline-block cursor-pointer pl-2 text-xs">创建的歌单</span>
        <ClientOnly fallback="加载中...">
          <ul v-if="songsStore.songsList.length != 0">
            <li
              v-for="(items, index) in songsStore.songsList.slice(
                1,
                songsStore.songsNumber.createdPlaylistCount
              )"
              :key="index"
              class="h-auto p-1 pl-2 lists-default"
              @click="gotoMusicLists(items.id)"
            >
              <div class="box-border flex items-center">
                <NuxtImg :src="items.coverImgUrl" class="h-12 w-12 rounded-lg" />
                <span class="ml-2 text-sm">{{ items.name }}</span>
              </div>
            </li>
          </ul>
        </ClientOnly>
      </div>
      <div>
        <span class="mx-3 my-2 inline-block cursor-pointer pl-2 text-xs">收藏的歌单</span>
        <ClientOnly fallback="加载中...">
          <ul v-if="songsStore.songsList.length != 0">
            <li
              v-for="(items, index) in songsStore.songsList.slice(
                songsStore.songsNumber.createdPlaylistCount,
                songsStore.songsList.length
              )"
              :key="index"
              class="h-auto p-1 pl-2 lists-default"
              @click="gotoMusicLists(items.id)"
            >
              <div class="box-border flex items-center">
                <NuxtImg :src="items.coverImgUrl" class="h-12 w-12 rounded-lg" />
                <span class="ml-2 text-sm">{{ items.name }}</span>
              </div>
            </li>
          </ul>
        </ClientOnly>
      </div>
    </div>
  </div>
</template>
